<script>
import {dimensionsLabels} from "./specsRows.config";
import request from "@/utils/request";

export default {
  name: "editDimensionModal",
  data() {
    return {
      dialogFormVisible: false,
      dimensionsLabels,
      modalTitle: '',
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
      form: {
        id: '',
        d_x: '',
        d_y: '',
        d_z: '',
        bezel: '',
        chin: '',
        head: '',
        weight: '',
      }
    }
  },
  methods: {
    show(data) {
      this.modalTitle = `Edit Dimension(${data.projectName})`
      Object.keys(this.form).forEach(key => {
        if (data[key]) {
          this.form[key] = data[key]
        }
      })

      this.dialogFormVisible = true
    },
    handleOk() {
      request({
        url: '/dimension/update',
        method: 'post',
        data: this.form
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('Update success')
          this.dialogFormVisible = false
        }
      })
    },
    handleInput(field) {
      this.form[field] = parseFloat(Number(this.form[field]).toFixed(2))
    }
  }
}
</script>

<template>
  <a-modal v-model:open="dialogFormVisible" :title="modalTitle" @ok="handleOk">
    <a-form :model="form" ref="formRef">
      <a-form-item v-for="item in dimensionsLabels" :key="item.field" :label="item.label" :name="item.field" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input-number v-model:value="form[item.field]" style="width: 100%;" :step="1" :min="0" @input="handleInput(item.field)"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped lang="less">

</style>
